<template>
	<view class="container">
		<u-navbar title-color='#fff' back-icon-color='#fff' height='110' title="菜谱搜索" :background="background"
			:border-bottom='false'>
			<view class="top slot-wrap">
				<view class="search">
					<u-search placeholder="甜点" @search='searchFun' @custom='searchFun' shape='square' height="74"
						bg-color='white' show-action :action-style="{color:'white'}" v-model="searchValue.val">
					</u-search>
				</view>
			</view>
		</u-navbar>

		<view class="content">
			<!-- 视频 -->
			<videoItem :videoData='videoData'>
				<view class="video-top">
					<text>精品名厨视频-会员专享</text>
					<image src="@/static/image/search/mengbanzu282.png"></image>
				</view>
			</videoItem>
			<!-- 展示列表 -->
			<view class="searchList">
				<view class="searchList-item" v-for="item in searchData" :key='item._id'>
					<navigator class="searchList-item" :url="'/pages/detail/detail?_id='+item._id">
						<image :src="item.coverpic"></image>
						<view class="box">
							<text>{{item.name}}</text>
							<view class="textbox">
								<text v-for="(item1,index) in item.ingredient" :key='index'>{{item1.name}}、</text>
							</view>
							<view class="imgbigbox">
								<view class="imgbox">
									<text>{{item.pageview}}.0万</text>
									<image src="../../static/image/index/like/mengbanzu278.png"></image>
								</view>
								<view class="imgbox">
									<text>{{Math.abs(item.collections)}}</text>
									<image src="../../static/image/index/like/mengbanzu279(1).png"></image>
								</view>
							</view>

						</view>
					</navigator>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					// background: 'url(../../static/image/index/ditu%20.png) no-repeat'
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					backgroundImage: 'linear-gradient(45deg,  rgb(238,129,49), rgb(240,153,55))'
				},
				searchValue: {
					val: '',
					currentPage: '1',
					pageSize: '10'
				},
				videoData: [],
				searchData: [],

			}
		},
		methods: {
			// 视频
			getMemberRecommend() {
				this.$api.search.getMemberRecommend().then(res => {
					this.videoData = res.message
					console.log(res.message)
				})
			},
			// 分类
			getSearchMenu() {
				this.$api.search.getSearchMenu(this.searchValue).then(({ menus }) => {
					this.searchData = menus
					// console.log(menus);
				})
			},
			searchFun() {
				this.getSearchMenu()
			}
		},
		onLoad() {
			this.getMemberRecommend()
			this.getSearchMenu()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.top {
			height: 100rpx;
			width: 750rpx;
			background: linear-gradient(45deg, rgb(238, 129, 49), rgb(240, 153, 55));
			position: fixed;
			top: 236rpx;
			// bottom: 0;
			right: 0;
			z-index: 99;

			.search {
				margin-top: 17rpx;
				width: 630rpx;
				margin: 0 auto;
			}
		}

		.content {
			margin-top: 75rpx;
			padding: 26rpx 32rpx;

			.video-top {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				text {
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 5rpx;
				}

				>image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.searchList {
				margin-top: 40rpx;

				.searchList-item {
					margin-bottom: 26rpx;
					display: flex;

					>image {
						width: 314rpx;
						height: 210rpx;
						border-radius: 16rpx;
						margin-right: 18rpx;
					}

					>.box {
						>text {
							font-size: 30rpx;
							font-weight: bold;
						}

						.textbox {
							margin-top: 20rpx;
							font-size: 24rpx;
							color: #aaa;
							width: 340rpx;
							height: 30rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;

							text {}

						}

						.imgbigbox {
							display: flex;
							margin-top: 54rpx;
							align-items: center;

							.imgbox {
								margin-right: 42rpx;

								text {
									font-size: 18rpx;
									color: #aaa;

								}

								image {
									width: 28rpx;
									height: 22rpx;
								}
							}
						}

					}
				}
			}
		}

	}
</style>
